<template>
  <div class="all" style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto">
    <a-row class="all-row" style="height:100%;width: 100%">
      <a-col span="24" class="all-col" style="height: 100%">
        <div class="top">
          <div class="t-left">
            <div class="t-left-top">
              <div class="t-left-top-left">
                <div class="top-left-top">输入参数</div>
                <div class="top-left-btn">

                  <div class="t-left-btn-left">
                    <div class="t-left-btn-all">
                      <div class="t-left-btn-text">
                        <ul >
                          <li style="font-size: 14px">总传动比</li>
                          <li style="font-size: 14px;margin-top: 4%">第1级行星轮系最大宽径比上限值</li>
                          <li style="font-size: 14px;margin-top: 4%">第2级行星轮系最大宽径比上限值</li>
                        </ul>
                      </div>
                      <div>
                        <ul >
                          <li><input v-model="form.R0" value="62.55" style="text-align: center;"/></li>
                          <li><input v-model="form.B1min" value="1" style="text-align: center;"/></li>
                          <li><input v-model="form.B2min" value="1" style="text-align: center;"/></li>
                        </ul>
                      </div>
                    </div>

                    <div class="t-left-btn-left2">
                      <input v-model="form.ratio_D1_D2_min" value="1" class="left-text"  style="text-align: center;width: 100px"/>
                      <img :src="mid"  class="img" />
                      <input v-model="form.ratio_D1_D2_max" value="1.2" class="right-text"  style="text-align: center;width: 100px"/>
                    </div>
                  </div>
                  <div class="t-left-btn-right">
                    <div class="t-left-btn-right-top">
                      <div class="t-left-btn-right-top1">不均载数据</div>
                      <div class="t-left-btn-right-top2">齿数比限制值</div>
                      <div style="width: 10%">
                        <a-button class="t-left-btn-right-top3" @click="showModal1">!</a-button>
                        <a-modal  title="齿数比限制值" :visible="visible1" :confirm-loading="confirmLoading" @ok="handleOk1"
                                  @cancel="handleCancel1">
                          <img :src="jump"  class="jump-img" />
                        </a-modal>
                      </div>

                    </div>

                    <div class="t-left-btn-right-btn">
                      <div class="t-left-btn-right-all">
                        <div class="t-left-btn-right-text">
                          <ul>
                            <li style="font-size: 14px;margin-top: 4%">6个行星轮</li>
                            <li style="font-size: 14px;margin-top: 4%">5个行星轮</li>
                            <li style="font-size: 14px;margin-top: 4%">4个行星轮</li>
                            <li style="font-size: 14px;margin-top: 4%">3个行星轮</li>
                          </ul>
                        </div>
                        <div class="text-1">
                          <ul>
                            <li><input  v-model="form.bb1" style="text-align: center"/></li>
                            <li><input  v-model="form.bb2" style="text-align: center" /></li>
                            <li><input  v-model="form.bb3" style="text-align: center"/></li>
                            <li><input  v-model="form.bb4" style="text-align: center"/></li>
                          </ul>
                        </div>
                        <div class="text-2">
                          <ul>
                            <li><input  v-model="form.aa1" style="text-align: center"/></li>
                            <li><input  v-model="form.aa2" style="text-align: center" /></li>
                            <li><input  v-model="form.aa3" style="text-align: center"/></li>
                            <li><input  v-model="form.aa4" style="text-align: center"/></li>
                          </ul>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <div class="t-left-top-right">
                <button class="button" @click="tclick">计算</button>
                <a-modal title="" :visible="visible2" :confirm-loading="confirmLoading" @ok="handleOk2"
                          @cancel="handleCancel2">
                  <div style="width: 100%;height: 300px" ref="chart"></div>
                </a-modal>
              </div>
            </div>
            <div class="t-left-btn">
              <div class="t-left-btn-top">以外径最小为目标函数</div>

                <div class="t-left-btn-num">
                  <table class="table-1" style="width: 100%;text-align: center;background-color:#F2F2F2">
                    <tr style="width: 100%;height:40%;background-color:#EAEAEA">
                      <th class="text4">第1级行<br>星轮个数</th>
                      <th class="text4">第2级行<br>星轮个数</th>
                      <th class="text4">第1级齿<br>数比</th>
                      <th class="text4">第2级齿<br>数比</th>
                      <th class="text4">总体积</th>
                      <th class="text4">第1级齿圈<br>半径表征值</th>
                      <th class="text4">第2级齿圈<br>半径表征值</th>
                      <th class="text4">第1级齿<br>圈宽径比</th>
                      <th class="text4">第2级齿<br>圈宽径比</th>
                      <th class="text4">第1级实际<br>最大宽径比</th>
                      <th class="text4">第2级实际<br>最大宽径比</th>
                      <th class="text4">第1级与第<br>2级齿宽比</th>
                    </tr>
                    <tr style="height: 20%;width: 100%" v-for="(item,index) in this.ans.rd_matrix" :key="index">
                      <td>{{item[0]}}</td>
                      <td>{{item[1]}}</td>
                      <td>{{item[2]}}</td>
                      <td>{{item[3]}}</td>
                      <td>{{item[4]}}</td>
                      <td>{{item[5]}}</td>
                      <td>{{item[6]}}</td>
                      <td>{{item[7]}}</td>
                      <td>{{item[8]}}</td>
                      <td>{{item[9]}}</td>
                      <td>{{item[10]}}</td>
                      <td>{{item[11]}}</td>
                    </tr>
                  </table>

                </div>
              </div>

            </div>
          </div>
          <div class="t-right">
            <img :src="picture1" class="picture-top">
          </div>

        <div class="btn">
          <div class="btn-left">
            <div class="btn-left-top">以体积最小为目标函数</div>
            <div class="btn-left-btn">

              <div class="btn-left-btn-data">
                <table class="table-2" style="width: 100%;text-align: center;background-color:#F2F2F2">
                  <tr style="width: 100%;height:40%;background-color:#EAEAEA">
                    <th class="text4">第1级行<br>星轮个数</th>
                    <th class="text4">第2级行<br>星轮个数</th>
                    <th class="text4">第1级齿<br>数比</th>
                    <th class="text4">第2级齿<br>数比</th>
                    <th class="text4">总体积<br>表征量</th>
                  </tr>
                  <tr v-for="(item,index) in this.ans.rm_matrix" :key="index">
                    <td>{{item[0]}}</td>
                    <td>{{item[1]}}</td>
                    <td>{{item[2]}}</td>
                    <td>{{item[3]}}</td>
                    <td>{{item[4]}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="btn-right">
            <img :src="picture2" class="picture-btn">
          </div>
        </div>

      </a-col>
    </a-row>
  </div>
</template>

<script>
import picture1 from "@/assets/image/image-57-1.png";
import picture2 from "@/assets/image/image-57-2.png";
import mid from "@/assets/image/image-57-3.png";
import jump from "@/assets/image/image-57-4.png";

import * as echarts from 'echarts';
import {OptiRatio_2stageP_increase_last} from "@/api/file";

export default {
  created() {
    document.title=' 两级NGW型行星轮系传动比分配'
  },
  name: "OptiRatio_2stageP_increase_last",
  data(){
    return {
      picture1,
      picture2,
      mid,
      jump,
      visible1: false,
      visible2: false,
      confirmLoading: false,
      form:{
        R0:62.55,
        B1min:1,
        B2min:1,
        // ratio_D2_D1_min:1,
        // ratio_D2_D1_max:1.1,
        bb1:1,
        bb2:1,
        bb3:1,
        bb4:1,
        aa1:3,
        aa2:3.7,
        aa3:5.7,
        aa4:13.9,
        ratio_D1_D2_min:1,
        ratio_D1_D2_max:1.2,
      },
      ans:{
        rd_matrix:[[]],
        rm_matrix:[[]]
      }
    };
  },
  methods:{
    showModal1() {
      this.visible1 = true;
    },
    //点击ok
    // eslint-disable-next-line no-unused-vars
    handleOk1(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible1 = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //点击cancel
    // eslint-disable-next-line no-unused-vars
    handleCancel1(e) {
      console.log('Clicked cancel button');
      this.visible1 = false;
    },
    //点击ok
    // eslint-disable-next-line no-unused-vars
    handleOk2(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible2 = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //点击cancel
    // eslint-disable-next-line no-unused-vars
    handleCancel2(e) {
      console.log('Clicked cancel button');
      this.visible2 = false;
    },

    tclick()
    {
       //this.visible2=true;
      OptiRatio_2stageP_increase_last(this.form)
          .then( res =>{
            console.log(res);
              this.ans=res;
              //this.init();
          })
          .catch(error =>{
            console.log(error);
          });
    },
    init() {
      //2.初始化
      this.chart = echarts.init(this.$refs.chart);
      //console.log(124323)
      //3.配置数据
      let option1 = {
        title: {
          x: 'center',
          text: '第1级行星系3个轮、第2级行星系3个轮'
        },
        tooltip: {},
        xAxis: {
          boundaryGap: false,
          name:'第一级级齿数比',
          min:3, //x轴的最小值
          max:7, //x轴最大值
          interval:0.5, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        yAxis: {
          boundaryGap: false,
          name:'体积表征量',
          min:2.6, //y轴的最小值
          max:3.05, //y轴最大值
          interval:0.05, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        series: [{
          type: 'line',
          smooth: true,
          symbol: null,
          data: [[3.2,2.74],[3.5,2.669],[3.75,2.635],[4,2.618],[4.25,2.615],[4.5,2.624],[4.75,2.643],[5,2.669],[5.5,2.741],[6,2.832],[6.5,2.938],[6.9,3.031]]
        }]
      };
      let option2 = {
        title: {
          x: 'center',
          text: '第1级行星系4个轮、第2级行星系3个轮'
        },
        tooltip: {},
        xAxis: {
          boundaryGap: false,
          name:'第1级级齿数比',
          min:3, //x轴的最小值
          max:6, //x轴最大值
          interval:0.5, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        yAxis: {
          boundaryGap: false,
          name:'体积表征量',
          min:2.1, //y轴的最小值
          max:2.4, //y轴最大值
          interval:0.05, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        series: [{
          type: 'line',
          smooth: true,
          symbol: null,
          data: [[3.2,2.352],[3.5,2.261],[3.75,2.209],[4,2.174],[4.25,2.152],[4.5,2.142],[4.75,2.141],[5,2.148],[5.5,2.181],[5.7,2.199]]
        }]
      };
      let option3 = {
        title: {
          x: 'center',
          text: '第1级行星系5个轮、第2级行星系3个轮'
        },
        tooltip: {},
        xAxis: {
          boundaryGap: false,
          name:'第1级级齿数比',
          min:3.2, //x轴的最小值
          max:3.7, //x轴最大值
          interval:0.05, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        yAxis: {
          boundaryGap: false,
          name:'体积表征量',
          min:1.96, //y轴的最小值
          max:2.12, //y轴最大值
          interval:0.02, //值之间的间隔
          type: 'value',
          axisLine: {onZero: false}
        },
        series: [{
          type: 'line',
          smooth: true,
          symbol: null,
          data: [[3.2,2.119],[3.3,2.081],[3.4,2.046],[3.5,2.016],[3.6,1.989],[3.7,1.964]]
        }]
      };
      this.chart.setOption(option1,option2,option3);
    },
  }

}
</script>

<style scoped>

.all{
  background-color:#FFFFFF;
}
.top{
  position: relative;
  background-color: #FFFFFF;
  height: 68%;
  width: 100%;
  margin-left: 10px;
}
.t-left{
  position: absolute;
  height: 100%;
  width: 70%;
  left:0%;
  background-color: #FFFFFF;
}
.t-left-top{
  height: 50%;
  width: 105%;
  background-color: #FFFFFF;
  position: relative;
}
.t-left-top-left{
  position: absolute;
  height: 95%;
  width: 85%;
  left:0;
  background-color: #c1bbbb;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.top-left-top{
  height: 11%;
  width: 100%;
  background-color: #D7D7D7;
  font-size: 16px;
  font-family: Arial;
  font-style: normal;
}
.top-left-btn{
  height: 89%;
  width: 100%;
  background-color: #FFFFFF;
  position: relative;
}
.t-left-btn-left{
  position: absolute;
  background-color: #FFFFFF;
  left:0;
  width: 50%;
  height: 100%;
}
.t-left-btn-all{
  display: flex;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  margin-left: 10px;
  margin-top: 10px;
}
.t-left-btn-text{
  margin-right: 10px;
  text-align: right;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.t-left-btn-left2{
  position: absolute;
  margin-left: 30px;
  height: 40px;
  bottom: 1.5%;
}
.left-text{
  left:10%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.img{
  width: 33.3%;
  height: 100%;
}
.right-text{
  right: 0;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.t-left-btn-right{
  position: absolute;
  background-color: #FFFFFF;
  right:3%;
  width: 50%;
  height: 100%;
  top: 0;
}
.t-left-btn-right-top{
  height: 15%;
  width: 55%;
  background-color: #FFFFFF;
  display: flex;
  margin-left: 20%;
}
.t-left-btn-right-top1{
  height: 100%;
  width: 40%;
  font-family: Arial;
  font-style: normal;
  font-size: 14px;
  text-align: center;

}
.t-left-btn-right-top2{
  height: 100%;
  width: 40%;
  font-family: Arial;
  font-style: normal;
  font-size: 14px;
}
.t-left-btn-right-top3{
  height: 80%;
  background-color: #F2F2F2;
  width: 30px;
}
.jump-img{
  width: 80%;
  height: 80%;
  text-align: center;
  position: absolute;
  top: 0;
}
.t-left-btn-right-btn{
  height: 85%;
  width: 100%;
  background-color: #FFFFFF;

}
.t-left-btn-right-all{
  display: flex;
  margin-left: 40px;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;

}
.t-left-btn-right-text{
  text-align: right;
  font-family: Arial;
  font-style: normal;
  font-size: 14px;
  margin-right: 5%;
}
.text-1
{
  height: 100%;
  width: 20%;
}
.text-1 input
{
  width: 100%;
}
.text-2{
  height: 100%;
  width: 20%;
}
.text-2 input
{
  width: 100%;
}
.t-left-top-right{
  position: absolute;
  height: 100%;
  width: 20%;
  right:-5.5%;
  top: 85%;
}
.button{
  font-family: Arial;
  font-style: normal;
  font-size: 14px;
  height: 12%;
  width: 43%;
}
.t-left-btn{
  height: 48%;
  width: 99%;
  background-color: #FFFFFF;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.t-left-btn-top{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #D7D7D7;
  height: 12%;
  width: 100%;
}
.t-left-btn-btn{
  width: 100%;
  height: 88%;
}
.t-left-btn-title{
  position: relative;
  width: 100%;
  height: 25%;
  background-color: #FFFFFF;

}
.title1{
  font-family: Arial;
  font-style: normal;
  font-size: 13px;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left:0.5%;
}
.title2{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left: 8.5%;
}
.title3{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left: 18.6%;
}
.title4{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 26.4%;
}
.title5{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 34%;
}
.title6{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 41%;
}
.title7{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5.5px;
  margin-left: 49%;
}
.title8{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 58%;
}
.title9{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 65.7%;
}
.title10{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left: 73%;
}
.title11{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left:81.5%;
}
.title12{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-top: 5px;
  margin-left:90%;
}

.t-left-btn-num{

}
.table-1{
  width: 100%;
  height: 20%;
  margin-top:0%;
  border-radius:3px;

}

.table-2{
  margin-top:0%;
  border-radius:3px;
}
td{
  margin-left: 20px;
  font-size: 16px;
  height: 25px;
  width: 82px;
}
.t-right{
  position: absolute;
  height: 100%;
  width:30%;
  right: 0;
  top: 0;
  background-color: #FFFFFF;
}
.picture-top{
  margin-left: 15px;
  margin-top: 0;
  width: 92%;
  height: 86%;
}
.btn{
  position: relative;
  background-color: #FFFFFF;
  height: 32%;
  width: 100%;
  margin-left: 10px;
}
.btn-left{
  position: absolute;
  height: 95%;
  left:0;
  width: 39.5%;
  background-color: #FFFFFF;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.btn-left-top{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #D7D7D7;
  width: 100%;
  height: 12%;

}
.btn-left-btn{
  width: 100%;
  height: 88%;
}
.btn-left-btn-title{
  position: relative;
  width: 100%;
  height: 25%;
  background-color: #FFFFFF;
}
.btn-title1{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  padding-left: 20px;
}
.btn-title2{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left: 20%;
}
.btn-title3{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left:37%;
}
.btn-title4{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left:53.5%;
}
.btn-title5{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  background-color: #FFFFFF;
  left: 0;
  margin-left:70%;
}

.btn-right{
  position: absolute;
  height: 100%;
  right:0;
  width: 60%;
  background-color: #FFFFFF;
}
.picture-btn{
  height: 98%;
  width: 99%;
}
</style>